<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>照片墙</title>
</head>
<body>
<style>
 #div1{
     position: relative;
     width: 960px;
     margin: 0px auto;
     padding-top: 100px;
     height: 600px;
 }
 #div1>img{
     position: absolute;
     width: 300px;
     border: 1px solid gray;
     padding: 10px;
 }
 #div1>img:nth-child(1) {
     position: absolute;
     left: -20px;
     transform: rotate(45deg);
 }
 #div1>img:nth-child(2) {
     position: absolute;
     left: 150px;
     transform: rotate(75deg);
 }
 #div1>img:nth-child(3) {
     position: absolute;
     left: 380px;
     transform: rotate(-45deg);
 }
 #div1>img:nth-child(4) {
     position: absolute;
     left: 600px;
     transform: rotate(75deg);
 }
 #div1>img:nth-child(5) {
     position: absolute;
     left: 800px;
     transform: rotate(25deg);
 }
 #div1>img:nth-child(6) {
     position: absolute;
     top: 400px;
     left: 0px;
     transform: rotate(15deg);
 }
 #div1>img:nth-child(7) {
     position: absolute;
     top: 400px;
     left: 200px;
     transform: rotate(-45deg);
 }
 #div1>img:nth-child(8) {
     position: absolute;
     top: 400px;
     left: 500px;
     transform: rotate(65deg);
 }
 #div1>img:nth-child(9) {
     position: absolute;
     top: 400px;
     left: 660px;
     transform: rotate(145deg);
 }
 #div1>img:nth-child(10) {
     position: absolute;
     top: 400px;
     left: 860px;
     transform: rotate(-45deg);
 }
 #div1>img:hover{
     transform: scale(1.5) ;
     transition: all 2s ease-out ;
     z-index: 999;
 }
</style>
<div id="div1">
    <img src="img/1.jpg" alt="">
    <img src="img/2.jpg" alt="">
    <img src="img/3.jpg" alt="">
    <img src="img/4.jpg" alt="">
    <img src="img/5.jpg" alt="">
    <img src="img/6.jpg" alt="">
    <img src="img/7.jpg" alt="">
    <img src="img/8.jpg" alt="">
    <img src="img/9.jpg" alt="">
    <img src="img/10.jpg" alt="">
</div>
</body>
</html>